<template>
  <div class="all">
    <header>
      <div class="div">
        <img src="../../../assets/返回.png" @click="back()" alt="">
        <span class="solid" @click="back()">返回</span>
      </div>
      <div class="div">
        <span>团队功能</span>
      </div>
      <div class="div">
        <span class="solid"></span>
      </div>
    </header>
    <div class="title">
      <a class="hengGang"></a>已开通功能
    </div>
    <div class="OpenedFunction">
      <ul>
        <li v-for="(item, index) in openList" :key="index" @click="jump(item)">
          <img :src="imgHttp + item.icon" alt="">
          <span>{{item.menu_name}}</span>
        </li>
      </ul>
    </div>
    <div class="title">
      <a class="hengGang"></a>未开通功能
    </div>
    <div class="NoOpenedFunction">
      <ul>
        <li v-for="(item, index) in noOpenList" :key="index" @click="NoFunction()">
          <img :src="imgHttp + item.icon" alt="">
          <span>{{item.menu_name}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {Toast} from 'vant'
import imgHttp from '../../../http/video.http'
export default {
  name: 'TeamFunction',
  data () {
    return {
      id: this.$route.query.id,
      noOpenList: [],
      openList: [],
      imgHttp: imgHttp.imgHttp
    }
  },
  mounted () {
    this.getFunction()
  },
  methods: {
    jump (item) {
      // 跳转1
      window.location.href = this.item.url
    },
    NoFunction () {
      Toast('您未开通此功能')
    },
    getFunction () {
      this.$http.findUserHospitalMenu({hospital_id: this.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.noOpenList = res.data.data['no']
            this.openList = res.data.data['yes']
            console.log(this.noOpenList)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    back () {
      this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped>
  .all{
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #FAF9FE;
  }
   header{
       width: 100%;
       height: 44px;
       display: flex;
       align-items: center;
       border-bottom: 1px solid #E5E5E5;
       background: white;
       position: sticky;
       top: 0;
       z-index: 9;
     }
     .div{
       width: 33%;
       height: 100%;
       display: flex;
       align-items: center;
       font-family: "PingFang SC";
       font-size: 15px;
       font-weight: bold;
     }
     .div img{
       margin-right: 5px;
     }
     .div:nth-child(1) img{
       height: 13px;
       width: 7px;
       margin-left: 15px;
     }
     .div:nth-child(3) img{
       margin-right: 5px;
     }
     .div:nth-child(3) span{
       margin-right: 15px;
     }
     .div:nth-child(2){
       justify-content: center;
     }
     .div:nth-child(3){
       justify-content: flex-end;
     }
     .solid{
       color: #1DA4F2;
     }
  .title{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    background: #ffffff;
  }
  .hengGang{
    display: block;
    width: 2px;
    border-radius: 1px;
    height: 15px;
    background: #1DA4F2;
    margin: 0 8px 0 15px;
  }
  ul {
    width: 100%;
    height: auto;
    background: #fff;
    /*background: linear-gradient(90deg, #1DA3F2 , #1DC7F2 );*/
    /*margin-top: 10px;*/
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 5px;
  }
  ul li{
    width: 25%;
    height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
  }
  ul li img{
    width: 28px;
    height: 28px;
    margin-bottom: 5px;
  }
</style>
